<!-- Breadcrumb.vue -->
<template>
    <div class="container">
      <nav v-if="shouldShowBreadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li v-for="(crumb, index) in breadcrumbs" :key="index" class="breadcrumb-item" :class="{ 'active': index === breadcrumbs.length - 1 }">
          <router-link v-if="index !== breadcrumbs.length - 1" :to="crumb.path">{{ crumb.text }}</router-link>
          <span v-else>{{ crumb.text }}</span>
        </li>
      </ol>
    </nav>
    </div>
  </template>
  
  <script>
  export default {
    name: "Breadcrumb",
    data() {
      return {
        breadcrumbs: []
      };
    },
    watch: {
      '$route'() {
        this.generateBreadcrumbs();
      }
    },
    created() {
      this.generateBreadcrumbs();
    },
    computed: {
    shouldShowBreadcrumb() {
      // 只有当路径不是根路径时才显示面包屑
      return this.$route.path !== '/';
    }
  },
    methods: {
      generateBreadcrumbs() {
        const matched = this.$route.matched.filter(record => record.meta && record.meta.breadcrumb);
        const breadcrumbs = [];
  
        // 如果不是首页，添加 Home 链接
        if (this.$route.path !== '/') {
          breadcrumbs.push({
            text: '首页',
            path: '/'
          });
        }
  
        // 添加匹配的路由到面包屑
        matched.forEach((route, index) => {
          let path = route.path;
  
          // 对于非根路径，累积路径
          if (index > 0) {
            path = breadcrumbs[index - 1].path + (breadcrumbs[index - 1].path.endsWith('/') ? '' : '/') + route.path;
          }
  
          breadcrumbs.push({
            text: route.meta.breadcrumb,
            path: path
          });
        });
  
        this.breadcrumbs = breadcrumbs;
      }
    }
  };
  </script>
  
  <style scoped>
  a{
    decoration: none;
    text-decoration:none;
  }
  .breadcrumb {
    background-color: transparent;
    margin-bottom: 1.5rem;
    margin-top: .5rem;
    padding-left: 2rem;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    content: ">>";
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #6c757d;
  }
  
  .breadcrumb-item a{
    color: #9a9a9a;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  .breadcrumb-item.active {
    color: #fea116;
    font-size: 14px;
  }
  </style>